<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/basebase.css" rel="stylesheet" type="text/css">
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
    <title>抽签</title>
    <script>
    $(function() {
        $('.changeProject').click(function() {
            $('.mask').show();
            $('html').addClass("bg-fixed");
        });
        $('.icon-close').click(function() {
            $('.mask').hide();
            $('html').removeClass('bg-fixed');
        });
        $('#start').click(function() {
            startRandom();
            $(this).hide();
            $('#stop').show();
        });

        $('#stop').click(function() {
            stopRandom();
            $(this).hide();
            $('#start').show();
        });
        $('.card').click(function() {
            $(this).addClass('current-card');
            $(this).siblings().removeClass('current-card');
        });
    });
    </script>
</head>

<body>
    <h1>2017 年首届福建省青少年网球排名赛  龙岩站
    <b>抽签仪式</b></h1>
    <div class="info relative">
        <span>项目：男子双打</span>
        <label>批次号：1</label>
        <button id="" class="btn-blue" style="margin-top: -50px;">一键抽签</button>
        <button id="" class="changeProject btn-blue">切换项目</button>
    </div>
    <div class="container">
        <div class="total">
            共64人/共32对
        </div>
        <div class="part-group">
            <div class="part-left">
                <div class="cards">
                    <div class="card">
                        <span>王一安（泉州体育）</span>
                        <span>王瑞（福州一中）</span>
                        <p>A1</p>
                        <i class="btn-red">抽签</i>
                    </div>
                    <div class="card">
                        <span>王一安（泉州体育）</span>
                        <span>王瑞（福州一中）</span>
                        <p>B3</p>
                        <i class="btn-orange">抽签</i>
                    </div>
                    <div class="card">
                        <span>王一安（泉州体育）</span>
                        <span>王瑞（福州一中）</span>
                        <p>C2</p>
                        <i class="btn-green">抽签</i>
                    </div>
                    <div class="card">
                        <span>王一安（泉州体育）</span>
                        <span>王瑞（福州一中）</span>
                        <p>A1</p>
                        <i class="btn-red">抽签</i>
                    </div>
                    <div class="card">
                        <span>王一安（泉州体育）</span>
                        <span>王瑞（福州一中）</span>
                        <p>B3</p>
                        <i class="btn-orange">抽签</i>
                    </div>
                    <div class="card">
                        <span>王一安（泉州体育）</span>
                        <span>王瑞（福州一中）</span>
                        <p>C2</p>
                        <i class="btn-green">抽签</i>
                    </div>
                    <div class="card">
                        <span>王一安（泉州体育）</span>
                        <span>王瑞（福州一中）</span>
                        <p>A1</p>
                        <i class="btn-red">抽签</i>
                    </div>
                    <div class="card">
                        <span>王一安（泉州体育）</span>
                        <span>王瑞（福州一中）</span>
                        <p>B3</p>
                        <i class="btn-orange">抽签</i>
                    </div>
                    <div class="card">
                        <span>王一安（泉州体育）</span>
                        <span>王瑞（福州一中）</span>
                        <p>C2</p>
                        <i class="btn-green">抽签</i>
                    </div>
                    <div class="card">
                        <span>王一安（泉州体育）</span>
                        <span>王瑞（福州一中）</span>
                        <p>A1</p>
                        <i class="btn-red">抽签</i>
                    </div>
                    <div class="card">
                        <span>王一安（泉州体育）</span>
                        <span>王瑞（福州一中）</span>
                        <p>B3</p>
                        <i class="btn-orange">抽签</i>
                    </div>
                    <div class="card">
                        <span>王一安（泉州体育）</span>
                        <span>王瑞（福州一中）</span>
                        <p>C2</p>
                        <i class="btn-green">抽签</i>
                    </div>
                </div>
                <div class="bottom-opera full-width">
                    <nav>
                        <form class="form-inline fr">
                            <div class="form-group">
                                <input type="text" class="form-control sm" value="页数">
                                <button class="btn-solid">跳转</button>
                            </div>
                        </form>
                        <ul class="pagination fr">
                            <li>
                                <a href="javascript:void(0)" aria-label="Previous">
                        <span aria-hidden="true"><</span>
                    </a>
                            </li>
                            <li class="active"><a href="javascript:void(0)">1</a></li>
                            <li><a href="javascript:void(0)">2</a></li>
                            <li><a href="javascript:void(0)">3</a></li>
                            <li><a href="javascript:void(0)">4</a></li>
                            <li><a href="javascript:void(0)">5</a></li>
                            <li>
                                <a href="javascript:void(0)" aria-label="Next">
                        <span aria-hidden="true">></span>
                    </a>
                            </li>
                        </ul>
                    </nav>
                </div>            
            </div>
            <div class="part-right">
                <button id="start">开始</button>
                <button id="stop">结束</button>
                <p id="selected"></p>
            </div>
        </div>
    </div>
    <div class="mask">
        <div class="form relative">
            <i class="icon-close"></i>
            <h2>切换项目</h2>
            <div class="select-group">
                <div>
                    <label>选择项目</label>
                    <select>
                        <option>男子甲组</option>
                        <option>男子乙组</option>
                    </select>
                </div>
                <div>
                    <label>选择批次</label>
                    <select>
                        <option>1</option>
                        <option>2</option>
                    </select>
                </div>
            </div>
            <button class="btn-qd">确定</button>
        </div>
    </div>
</body>

</html>